react-i18next
Advanced tools
Package description
The react-i18next package is a powerful internationalization framework for React / React Native which is based on i18next. It provides a way to translate your application into multiple languages, handle plurals and formatting, and manage translations.
Translation
This feature allows you to translate text in your React components using the `t` function provided by the `useTranslation` hook.
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation();
return <p>{t('keyForTranslation')}</p>;
}Language Switching
This feature enables you to switch languages on the fly within your application by calling the `changeLanguage` method.
import { useTranslation } from 'react-i18next';
function ChangeLanguageButton() {
const { i18n } = useTranslation();
return (
<button onClick={() => i18n.changeLanguage('de')}>Change to German</button>
);
}Pluralization
This feature allows you to handle plural forms in translations depending on the count provided.
import { useTranslation } from 'react-i18next';
function MyComponent({ count }) {
const { t } = useTranslation();
return <p>{t('keyForPlural', { count })}</p>;
}Formatting
This feature allows you to format dates, numbers, and other values within your translations.
import { useTranslation } from 'react-i18next';
function MyComponent({ date, number }) {
const { t } = useTranslation();
return (
<div>
<p>{t('formattedDate', { date })}</p>
<p>{t('formattedNumber', { number })}</p>
</div>
);
}Namespaces
This feature allows you to organize your translations into namespaces, making it easier to manage large translation files.
import { useTranslation } from 'react-i18next';
function MyComponent() {
const { t } = useTranslation('namespace1');
return <p>{t('namespace1:keyForTranslation')}</p>;
}LinguiJS is a readable, automated, and optimized (5 kb) internationalization for JavaScript. It is similar to react-i18next but uses a different API and has its own macro syntax for defining translations.
React Intl is part of FormatJS which provides internationalization support for React applications. It is similar to react-i18next in providing translations and formatting but uses a different API, including components like <FormattedMessage> and <FormattedNumber>.
This package provides a component for React that utilizes the Counterpart translation library. It is less feature-rich compared to react-i18next and is more suitable for simpler applications that do not require advanced features like pluralization or namespace support.
React Localize Redux provides localization support for React/Redux applications. It integrates with Redux for state management of translations and locale data, which is different from react-i18next's approach of using the i18next framework.
Readme
The documentation is published on react.i18next.com
Before: Your react code would have looked something like:
...
<div>Just simple content</div>
<div>
Hello <strong title="this is your name">{name}</strong>, you have {count} unread message(s). <Link to="/msgs">Go to messages</Link>.
</div>
...
After: With the trans component just change it to:
...
<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>
...
Head over to the interactive playground at codesandbox.
Want to learn more about how seamless your internationalization and translation process can be?
Source can be loaded via npm or downloaded from this repo.
# npm package
$ npm install react-i18next
window.reactI18nextThanks goes to these wonderful people (emoji key):
 Jan Mühlemann 💻 💡 📖 💬 |  Adriano Raiano 💻 💡 📖 💬 |  Isaac Hinman 💻 💡 💬 |  Kevin Ross 💬 💻 |  Matheus Schettino 💻 💬 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!
localization as a service - locize.com
Needing a translation management? Want to edit your translations with an InContext Editor? Use the orginal provided to you by the maintainers of i18next!
With using locize you directly support the future of i18next and react-i18next.
FAQs
Internationalization for react done right. Using the i18next i18n ecosystem.
The npm package react-i18next receives a total of 3,317,811 weekly downloads. As such, react-i18next popularity was classified as popular.
We found that react-i18next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Researchers recently demonstrated that the npm Registry is vulnerable to cache poisoning combined with DoS, posing significant risks for package availability.
Security News
The June TC39 meeting wrapped up this week with eight proposals moving on to the next stage. Here's a quick roundup of the features that the committee approved to advance.
Security News
Cyber extortion in the US and Canada hit record levels in 2023, with ransomware attacks surging and median ransom demands skyrocketing, though fewer companies are choosing to pay ransoms.